<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('${taskDetail.taskTitle}')" />
	<th:block th:include="include :: summernote-css" />
	<th:block th:include="include :: layout-latest-css" />
	<!--导入layui-->
	<link rel="stylesheet" th:href="@{/ajax/libs/layui-v2.6.8/layui/css/layui.css}">
	<link href="../../../static/css/task-detail.css" th:href="@{/css/task-detail.css}" rel="stylesheet"/>
	<style>
		*{ margin:0; padding:0; list-style:none;outline-style: none;}
		.send{
			position: relative;
		}
		.w500{
			width: 98%;
			height: auto;
			margin: 0 auto;
			overflow: hidden;
		}
		#content {
			height: 90px;
			border: 1px solid #07C160;
			background-color: #fff;
			border-radius: 5px;
			padding: 3px 10px;
			overflow-y:auto;
		}
		.send a.btn{
			position: absolute;
			right: 20px;
			bottom: 20px;
			padding:5px 20px;
			display: block;
			color: #fff;
			background: #07C160;
			border-radius: 3px;
			text-decoration: none;
			font-size: 14px;
			font-weight: bold;
			float: left;
			margin-top: 5px;
		}
		.send a.btn:hover{
			background: #07C160;
			-webkit-transition:all 0.2s linear;
			-moz-transition:all 0.2s linear;
			-ms-transition:all 0.2s linear;
			-o-transition:all 0.2s linear;
			transition:all 0.2s linear;
		}
		.send .faces{
			position: absolute;
			right: 98px;
			bottom: 20px;
			width: 25px;
			height:25px;
			display: block;
			float: right;
			background-image: url(/img/face/faces.png) ;
			background-position: 0 0;
			margin-right:5px;
			margin-top:5px;
		}
		.send .on{
			background-position: left bottom;
		}
		.face{
			overflow: hidden;
			display: none;}
		.face li{
			width: 22px;
			height: 22px;
			margin:3px;
			float: left;
		}

		/*清楚浮动*/
		.clearfix-1:after {
			content: '';
			display: block;
			clear: both;
		}

		/*显示不全用...表示*/
		.ellipsis {
			width: 40px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			display: inline-block;
		}
	</style>
</head>
<body class="gray-bg" id="my-body">
	<!--聊天模块-->
	<div th:if="${taskDetail.status=='3'||taskDetail.status=='4'}" class="ui-layout-west">
		<div class="box box-main" style="background-color: rgba(255,255,255,.5)">
			<div class="box-header">
				<div class="box-title">
					 交流
				</div>
			</div>
			<div class="ui-layout-content">
				<div style="height: 40px;width: 100%;cursor:pointer;position: relative;"  onclick="goChat()">
					<span>
						<img th:src="${linkUser.avatar}"  alt="头像" style="height: 40px;width: 40px;margin-right: 1px">
					</span>
					<span th:if="${linkUser.userName!=null}" th:text="${linkUser.userName}"   style="font-size: 13px;font-weight: 700;position: relative;top: -12px">
						用户名
					</span>
					<span th:if="${linkUser.userName==null}" th:text="${linkUser.loginName}" style="font-size: 13px;font-weight: 700;position: relative;top: -12px">
						用户名
					</span>
					<span id="msg-hint" style="position: absolute;left: 44px;bottom: 0;color: #999aaa;overflow: hidden;word-break:break-all;height: 18px;top: 21px" th:utext="${newestUnread?.msg}">1231111111111111111111111111111111111</span>
					<span style="float: right;right: 0">
						<span class="online-status" style="position: absolute;top: 0;right: 0;font-size: 10px;display: inline-block;padding:2px 7px ;border-radius: 10px; -webkit-transform-origin-x: 0;-webkit-transform: scale(0.80);background-color: #999999;color: white;" th:if="${onlineStatus=='0'}">离线</span>
						<span class="online-status" style="position: absolute;top: 0;right: 0;font-size: 10px;display: inline-block;padding:2px 7px ;border-radius: 10px; -webkit-transform-origin-x: 0;-webkit-transform: scale(0.80);background-color: red;color: white;" th:if="${onlineStatus=='1'}">在线</span>
						<span th:if="${unreadSize<99&&unreadSize!=0}" class="msg-num" th:text="${unreadSize}" style="position:absolute;;top: 20px;right: 5px;font-size: 10px;display: inline-block;padding:3px 7px ;border-radius: 10px;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.80);background-color: red;color: white;">99+</span>
						<span th:if="${unreadSize>=99}" class="msg-num" style="position:absolute;;top: 20px;right: 5px;font-size: 10px;display: inline-block;padding:2px 1px ;border-radius: 10px;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.80);background-color: red;color: white;">99+</span>
					</span>
				</div>
			</div>
		</div>
	</div>
	<!--任务主体，内容-->
	<div class="ui-layout-center" style="max-width: 78%">
		<div class="container-div">
			<div class="row">
				<!--<div class="col-sm-12 search-collapse">
					预留
				</div>-->
				<div class="col-sm-12 select-table table-striped">
					<!--任务标题-->
					<h1 id="taskTitle" th:text="${taskDetail.taskTitle}"></h1>

					<div class="task-info-box" id="task-info-box">
						<div class="task-bar-top">
							<div class="bar-content">
								<a class="follow-nickName " th:href="${'/system/user/home/'+selfUser.userId}" target="_blank" rel="noopener" th:text="${selfUser.userName}"></a>
								<span class="time" th:text="(${#strings.isEmpty(taskDetail.lastEditDate)}) ? ${#dates.format(taskDetail.createTime, 'yyyy-MM-dd HH:mm:ss')+'  创建'} : ${#dates.format(taskDetail.lastEditDate, 'yyyy-MM-dd HH:mm:ss')+'  修改'}"></span>
							</div>
						</div>
						<div class="task-status" id="task-status"></div>
						<div class="blog-tags-box">
							<div id="tag">
								<span style="color: #999aaa;font-size: 14px;font-weight: 300;margin-right: 20px" >文章标签</span>
							</div>
						</div>
						<!--<div class="operating">
							<a class="href-article-edit" href="https://editor.csdn.net/md?articleId=123395998">编辑</a>
						</div>-->
					</div>

					<!--匹配状况-->
					<div id="match-status" >
						<div class="column-group-item">
							<div class=" match-box-l">
								<span th:if="${taskDetail.status=='1'}">匹配中···</span>
								<span th:if="${taskDetail.status=='2'}">匹配成功，
									<span th:if="${taskDetail.matchStatus==0||taskDetail.matchStatus==null}">等待确认</span>
									<span th:if="${taskDetail.matchStatus==1}" style="color: #F8AA00">已确认</span>
									<span th:if="${linkTask!=null?linkTask.matchStatus==1:0}" style="color: #FF666A">【对方已确认匹配】</span>
									<span th:if="${linkTask!=null?(linkTask.matchStatus==0||linkTask.matchStatus==null):0}" >【等待对方确认匹配】</span>
								</span>
							</div>
							<div class=" match-box-r">
								<span th:if="${taskDetail.status=='1'}">
									<span th:text="${'【'+taskMatchSize}+'】'">【10】</span>
									<span>个任务正在匹配</span>
									<span th:if="${taskMatchSize<50}">当前匹配人数较少，请耐心等待</span>
								</span>
								<!--TODO 这里的判断可能有问题-->
								<span th:if="${linkTask!=null&&taskDetail.status!='1'}">
									<img th:src="${#strings.isEmpty(linkTask.taskThumbnail)} ? '' : ${linkTask.taskThumbnail}" alt="" style="max-width: 20px;max-height: 28px;">
									<span th:text="${linkTask.taskTitle}">标题</span>
									<a href="#"  data-toggle="modal"  data-target="#myModal" style="color: #01AAED;">查看匹配详情</a>
								</span>
							</div>
						</div>
					</div>



					<!--任务详情-->
					<div th:utext="${taskDetail.taskContent}">详情</div>
					<br>
					<br>
<!--					<section data-mid="t22" style="margin: 20px 1em 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(34, 34, 34); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; line-height: 25.6px; display: flex; justify-content: center; align-items: center; -webkit-box-align: center; -webkit-box-pack: center;"><section data-mid="" style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; text-align: center; line-height: 30px;"><section data-mid="" data-contenteditable="false" style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; width: 95px; height: 2px; background-image: linear-gradient(to left, rgb(20, 20, 20), rgb(240, 240, 240)); display: inline-block; float: left; transform: translate(0px, 12px);"><br style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;"></section><section data-mid="" data-contenteditable="false" style="margin: 0px; padding: 3px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 50%; width: 10px; height: 10px; float: left; transform: translate(0px, 8px); background-color: rgb(177, 177, 177);"><section data-mid="" style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 50%; width: 5px; height: 5px; background-color: rgb(20, 20, 20);"><br style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;"></section></section><section data-mid="" style="margin: 0px; padding: 0px 10px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(79, 79, 79); min-width: 70px; float: left;"><strong style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;">END</strong></section><section data-mid="" data-contenteditable="false" style="margin: 0px; padding: 3px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 50%; width: 10px; height: 10px; float: left; transform: translate(0px, 9px); background-color: rgb(177, 177, 177);"><section data-mid="" style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 50%; width: 5px; height: 5px; background-color: rgb(20, 20, 20);"><br style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;"></section></section><section data-mid="" data-contenteditable="false" style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; width: 95px; height: 2px; background-image: linear-gradient(to right, rgb(20, 20, 20), rgb(240, 240, 240)); display: inline-block; float: left; transform: translate(-1px, 14px);"><br style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;"></section></section></section>-->
				</div>
			</div>
		</div>
	</div>
	<!--
	评分模块
	已经坚持了10天
	太棒了，还有2天就能完成任务
	-->

	<!--
	结束时：经过100天的努力，恭喜你们完成了自己的挑战任务。任务期间你们进行了100次交流。
	最后再给对方一次评价和鼓励吧。
	-->
	<div class="ui-layout-east" th:if="${taskDetail.status!='1'&&taskDetail.status!='2'}">
		<div  style="background-color: rgba(255,255,255,.5);padding: 20px 0;" th:if="${(taskDetail.status=='3'||taskDetail.status=='4')&&taskFinish=='0'}">
			<div style="font-size: 16px; border-left: #5FB878 solid 3px; padding: 15px 0 20px 15px;margin-left: 9px;margin-bottom: 10px; background-color: #FAFAFA">上传评分标准与阶段成果</div>
			<ul class="layui-timeline">
				<li class="layui-timeline-item" th:each="score : ${scores}">
					<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
					<div class="layui-timeline-content layui-text">
						<h3 class="layui-timeline-title" th:text="${score.name}">8月18日</h3>
						<ul>
							<li><a href="#" data-toggle="modal" th:onclick="getAnswer([[${score.id}]])"  data-target="#answer">评分标准</a></li>
<!--							<p>通过B站SSM教学视频，学完ssm</p>-->
							<li><a href="#" data-toggle="modal" th:onclick="getAchievement([[${score.id}]])" data-target="#achievement">阶段成果</a></li>
<!--							<p>已经观看完，学习笔记</p>-->
						</ul>
					</div>
				</li>
				<li class="layui-timeline-item">
					<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
					<div class="layui-timeline-content layui-text">
						<div class="layui-timeline-title">end</div>
					</div>
				</li>
			</ul>

			<br>
			<br>
			<div style="font-size: 16px; border-left: #5FB878 solid 3px; padding: 15px 0 20px 15px;margin:9px 0 10px 10px ; background-color: #FAFAFA">参与评分</div>
			<ul class="layui-timeline">
				<li class="layui-timeline-item" th:each="linkTaskScore : ${linkTaskScores}">
					<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
					<div class="layui-timeline-content layui-text">
						<h3 class="layui-timeline-title" th:text="${linkTaskScore.name}">第一阶段</h3>
						<ul th:if="${linkTaskScore.status=='0'}">
							<li><a href="#" data-toggle="modal" data-target="#check-answer" th:onclick="checkAnswer([[${linkTaskScore.id}]])">查看评分标准</a></li>
							<li><a href="#" data-toggle="modal" data-target="#check-achievement" th:onclick="checkAchievement([[${linkTaskScore.id}]])">查看阶段成果</a></li>
						</ul>
						<hr>
						<br>
						<form th:id="${'form-score-data'+linkTaskScore.id}" th:if="${linkTaskScore.status=='0'}">
							<input type="hidden" name="id" th:value="${linkTaskScore.id}">
							<input type="hidden" name="status" value="1">
							<input type="hidden" th:id="${'score'+linkTaskScore.id}" name="score">
							<label style="border-bottom: 1px solid #eee;width: 100%;margin-bottom: 15px;padding-bottom: 5px">评分：</label>
							<div th:id="${'slide'+linkTaskScore.id}" style="width: 120px"></div>
							<br>
							<label style="border-bottom: 1px solid #eee;width: 100%;margin-bottom: 15px;padding-bottom: 5px">评语：</label>
							<textarea style="width: 120px" maxlength="30" type="text" name="comments"  class="form-control" placeholder="请输入评语"></textarea>
							<button  type="button"   class="btn btn-info pull-right submit-link-score" style="width: 50px;font-size: 10px;margin-right: 40px;margin-top: 10px" >提交</button>
						</form>
						<div th:if="${linkTaskScore.status=='1'}">
							<div>
								<span >评分：</span> <span th:text="${linkTaskScore.score}">9</span>
							</div>
							<hr>
							<div>
								<span>评语：</span> <span style="overflow: hidden; table-layout:fixed; word-break:break-all; width: 120px" th:text="${linkTaskScore.comments}">1234</span>
							</div>
						</div>
						<br><br>
					</div>

				</li>

				<li class="layui-timeline-item">
					<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
					<div class="layui-timeline-content layui-text">
						<div class="layui-timeline-title">end</div>
					</div>
				</li>
			</ul>
		</div>
		<!--当两个任务都结束结束，是否结算，并获取对应的自律积分-->
		<div id="task-end-box" th:if="${taskFinish=='1'}">
			<div style="font-size: 16px; border-left: #5FB878 solid 3px; padding: 15px 0 20px 15px;margin:9px 0 10px 10px ; background-color: #FAFAFA">任务评分</div>
			<ul class="layui-timeline">
				<li class="layui-timeline-item" th:each="score : ${scores}">
					<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
					<div class="layui-timeline-content layui-text">
						<h3 class="layui-timeline-title" th:text="${score.name}">第一阶段</h3>
						<div>
							<span >评分：</span> <span th:text="${score.score}">9</span>
						</div>
						<hr>
						<div>
							<span>评语：</span> <span style="overflow: hidden; table-layout:fixed; word-break:break-all; width: 120px" th:if="${score.comments!=null}" th:text="${score.comments}">1234</span><span style="overflow: hidden; table-layout:fixed; word-break:break-all; width: 120px" th:if="${score.comments==null}" >对方未参与评分</span>
						</div>
						<br><br>
					</div>
				</li>

				<li class="layui-timeline-item">
					<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
					<div class="layui-timeline-content layui-text">
						<div class="layui-timeline-title">end</div>
					</div>
				</li>
				<hr>
				<br>
				<br>
				<div th:text="${'为期'+durationDay+'天的任务已经结束。'}"></div>
				<hr>
				<!--获取三次评分，计算结果，然后将经验给用户，修改任务状态为结束。-->
				<div style="color: #01AAED;margin-right: 20px" class="pull-right" th:text="${'最终评分：'+taskDetail.score}" ></div>
				<br>
				<br>
				<br>
				<br>
			</ul>
		</div>
	</div>



	<!--拟态窗-->

	<!--评分标准框-->
	<div class="modal inmodal" id="answer" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content animated bounceInRight">
				<div class="modal-header" style="padding: 16px 8px">
					<button type="button" class="close" data-dismiss="modal" style="position: relative;z-index: 9999">
						<span aria-hidden="true">&times;</span>
						<span class="sr-only">关闭</span>
					</button>
					<h3>评分标准</h3>
				</div>
				<div class="modal-body" style="min-height: 300px">
					<div style="color: #999aaa;">
						<span onclick="view('answer')" style="cursor:pointer;"><i class="fa fa-eye" style="font-size: 16px;font-weight: 100;color: rgba(0 ,0 ,0 ,0.4)"></i><span style="margin-left: 5px">view</span></span>
						<span style="font-weight: 700">&nbsp;|&nbsp;</span>
						<span onclick="edit('answer')" style="cursor:pointer;"><i class="glyphicon glyphicon-leaf" style="color: wheat;"></i><span style="margin-left: 5px">编辑</span></span>
					</div>
					<hr>
					<!--th:field="*{grading.grading}"-->
					<div id="input-answer" style="margin-top: 20px;display: none">
						<form class="form-horizontal m" id="form-score-grading">
							<input id="get-answer-score" name="id" type="hidden">
							<input type="hidden" class="form-control" name="grading" id="grading-id">
							<div class="summernote" id="grading"></div>
						</form>
					</div>
					<div id="show-answer">
					</div>
				</div>
				<div class="modal-footer">
					<button type="button"   class="btn btn-white close-btn" data-dismiss="modal">关闭</button>
					<button id="answer-save" type="button"  class="btn btn-primary" style="display: none" >保存</button>
				</div>
			</div>
		</div>
	</div>
	<!--阶段成果-->
	<div class="modal inmodal" id="achievement" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content animated bounceInRight">
				<div class="modal-header" style="padding: 16px 8px">
					<button type="button" class="close" data-dismiss="modal" style="position: relative;z-index: 9999">
						<span aria-hidden="true">&times;</span>
						<span class="sr-only">关闭</span>
					</button>
					<h3>阶段成果</h3>
				</div>
				<div class="modal-body" style="min-height: 300px">
					<div style="color: #999aaa;">
						<span onclick="view('achievement')" style="cursor:pointer;"><i class="fa fa-eye" style="font-size: 16px;font-weight: 100;color: rgba(0 ,0 ,0 ,0.4)"></i><span style="margin-left: 5px">view</span></span>
						<span style="font-weight: 700">&nbsp;|&nbsp;</span>
						<span onclick="edit('achievement')" style="cursor:pointer;"><i class="glyphicon glyphicon-leaf" style="color: wheat;"></i><span style="margin-left: 5px">编辑</span></span>
					</div>
					<hr>
					<!--th:field="*{grading.grading}"-->
					<div id="input-achievement"  style="margin-top: 20px;display: none">
						<form class="form-horizontal m" id="form-achievement-grading">
							<input id="get-achievement-score" name="id" type="hidden" >
							<input type="hidden" class="form-control" name="stageResult" id="stageResult-id">
							<div class="summernote" id="stageResult"></div>
						</form>
					</div>
					<div id="show-achievement">
					</div>
				</div>
				<div class="modal-footer">
					<button type="button"   class="btn btn-white close-btn" data-dismiss="modal">关闭</button>
					<button id="achievement-save"   type="button"  class="btn btn-primary" style="display: none" >保存</button>
				</div>
			</div>
		</div>
	</div>
	<!--查看评分标准-->
	<div class="modal inmodal" id="check-answer" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content animated bounceInRight">
				<div class="modal-header" style="padding: 16px 8px">
					<button type="button" class="close" data-dismiss="modal" style="position: relative;z-index: 9999">
						<span aria-hidden="true">&times;</span>
						<span class="sr-only">关闭</span>
					</button>
					<h3>关联任务评分标准</h3>
				</div>
				<div class="modal-body" style="min-height: 300px">
					<div id="check-answer-content">

					</div>
				</div>
				<div class="modal-footer">
					<button type="button"   class="btn btn-white close-btn" data-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>
	<!--查看阶段成果-->
	<div class="modal inmodal" id="check-achievement" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content animated bounceInRight">
				<div class="modal-header" style="padding: 16px 8px">
					<button type="button" class="close" data-dismiss="modal" style="position: relative;z-index: 9999">
						<span aria-hidden="true">&times;</span>
						<span class="sr-only">关闭</span>
					</button>
					<h3>关联任务阶段成果</h3>
				</div>
				<div class="modal-body" style="min-height: 300px">
					<div id="check-achievement-content">

					</div>
				</div>
				<div class="modal-footer">
					<button type="button"   class="btn btn-white close-btn" data-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>
	<!--匹配确认框-->
	<div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true" th:if="${linkTask!=null}">
		<div class="modal-dialog">
			<div class="modal-content animated bounceInRight">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" style="position: relative;z-index: 9999">
						<span aria-hidden="true">&times;</span>
						<span class="sr-only">关闭</span>
					</button>
					<div id="task-detail-top">
						<div class="user">
							<img class="img-circle" th:src="(${#strings.isEmpty(linkUser.avatar)}) ? @{/img/river.png} : @{${linkUser.avatar}}" th:onerror="'this.src=\'' + @{'/img/river.png'} + '\''">
							<div>
								<a th:href="${'/system/user/home/'+linkUser.userId}" target="_blank">
									<span class="user-name" th:text="(${#strings.isEmpty(linkUser.userName)}) ? ${linkUser.loginName+' | '}: ${linkUser.userName}+' | '">lihua</span>
									<span class="user-sex" th:if="${linkUser.sex=='0'}">性别：男</span>
									<span class="user-sex" th:if="${linkUser.sex=='1'}">性别：女</span>
								</a>
							</div>
						</div>
						<div class="user-detail">
							<span class="user-grade">自律等级</span>
							<span class="grade" th:text="${'LV'+linkUser.grade}">4</span>
							<span class="user-last-login" th:text=" ${'最近登录时间：'+ #dates.format(linkUser.loginDate, 'yyyy-MM-dd HH:mm:ss')}">最近登录时间</span>
						</div>
					</div>
				</div>
				<div class="modal-body">
					<div id="task-detail-bottom">
						<h3 style="font-weight: 500;color: #3D3D40">任务详情</h3>
						<div style="width: 100%;border-top: 1px solid #E5E5E5;z-index: 999"></div>
						<div style="margin-top: 20px">
							<div th:text="${linkTask.taskTitle}" style="font-size: 16px;color: #807d7d;font-weight: 600;margin-bottom: 15px">标题</div>
							<div th:text="${linkTask.taskSummary}" style="margin-bottom: 15px">简介</div>
							<div style="margin-bottom: 10px">
								<span id="tag-link" >标签：</span>
								<span th:text="${'结束时间：'+#dates.format(linkTask.finishDate, 'yyyy-MM-dd HH:mm:ss')}" style="margin-left: 10px">结束时间</span>
							</div>
							<div style="width: 100%;border-top: 1px solid #E5E5E5;z-index: 999;margin-bottom: 20px"></div>
							<div th:utext="${linkTask.taskContent}">具体内容</div>
						</div>
					</div>
				</div>
				<div class="modal-footer" th:if="${taskDetail.matchStatus==0||taskDetail.matchStatus==null}">
					<button type="button" id="button-replace" class="btn btn-white"     th:onclick="replaceTask([[${taskDetail.id}]])">更换</button>
					<button type="button" id="button-confirm" class="btn btn-primary"  th:onclick="confirmTask([[${taskDetail.id}]])">确认</button>
				</div>
			</div>
		</div>
	</div>

	<th:block th:include="include :: footer-layui" />
	<th:block th:include="include :: summernote-js" />
	<th:block th:include="include :: layout-latest-js" />
	<script th:inline="javascript">
		var datas = [[${@dict.getType('task_status')}]];
		var prefix = ctx + "taskcenter/taskcenter";
		var scores = [[${scores}]]
		var linkTaskScores = [[${linkTaskScores}]]

		$(function() {
			var panehHidden = false;
			var status = $.table.selectDictLabel(datas,  [[${taskDetail.status}]])
			if ($(this).width() < 769) {
				panehHidden = true;
			}
			$('body').layout({ initClosed: panehHidden, west__size: 185 });
			// 回到顶部绑定
			if ($.fn.toTop !== undefined) {
				var opt = {
					win:$('.ui-layout-center'),
					doc:$('.ui-layout-center')
				};
				$('#scroll-up').toTop(opt);
			}
			//去除任务状态样式
			//匹配中
			var status= status.replace("class='badge badge-primary'","style='width: max-content;color: #fff;transform: rotate(45deg) translateY(-32px) translateX(-28px);position: absolute;top: 0;right: 0;'")
			//匹配成功
			var status= status.replace("class='badge badge-success'","style='width: max-content;color: #fff;transform: rotate(45deg) translateY(-32px) translateX(-25px);position: absolute;top: 0;right: 0;font-size: 10px;'")
			//进行中
			var status= status.replace("class='badge badge-info'","style='width: max-content;color: #fff;transform: rotate(45deg) translateY(-32px) translateX(-28px);position: absolute;top: 0;right: 0;'")
			//待评价
			var status= status.replace("class='badge badge-warning'","style='width: max-content;color: #fff;transform: rotate(45deg) translateY(-32px) translateX(-28px);position: absolute;top: 0;right: 0;'")
			//已结束
			var status= status.replace("class='badge badge-danger'","style='width: max-content;color: #fff;transform: rotate(45deg) translateY(-32px) translateX(-28px);position: absolute;top: 0;right: 0;'")
			$('#task-status').html(status)

			//加载标签
			var tagStr = [[${taskDetail.tag}]]+""
			var tagStr = tagStr.replace('，',',')
			var strings = tagStr.split(',');
			for (let string of strings) {
				var tag = "<span class='label-tag'>"+string+"</span>"
				$('#tag').append(tag)
			}
			if ([[${linkTask!=null}]]){
				var tagLinkStr = [[${linkTask?.tag}]]+""
				var tagLinkStr = tagLinkStr.replace('，',',')
				var strings1 = tagLinkStr.split(',');
				for (let string of strings1) {
					var tag = "<span class='label-tag'>"+string+"</span>"
					$('#tag-link').append(tag)
				}
			}

			$('.summernote').summernote({
				lang: 'zh-CN',
				dialogsInBody: true,
				height:150,
				callbacks: {
					onChange: function(contents, $edittable) {
						$("input[name='" + this.id + "']").val(contents);
					},
					onImageUpload: function(files) {
						var obj = this;
						var data = new FormData();
						data.append("file", files[0]);
						$.ajax({
							type: "post",
							url: ctx + "common/upload",
							data: data,
							cache: false,
							contentType: false,
							processData: false,
							dataType: 'json',
							success: function(result) {
								if (result.code == web_status.SUCCESS) {
									$('#' + obj.id).summernote('insertImage', result.url);
								} else {
									$.modal.alertError(result.msg);
								}
							},
							error: function(error) {
								$.modal.alertWarning("图片上传失败。");
							}
						});
					}
				}
			});

			//提交关联任务评分
			$('.submit-link-score').click(function () {
				var formId = $(this).parent().attr('id')
				var data = $('#'+formId).serialize()
				var url= '/system/score/edit'
				var config = {
					url: url,
					type: "post",
					dataType: "json",
					data: data,
					beforeSend: function () {
						$.modal.loading("正在处理中，请稍候...");
					},
					success: function(result) {
						//关闭遮罩层
						$.modal.closeLoading();
						if (result.code==0){
							//更新本地的数据
							//console.log("成功")
							layer.open({
								title: '系统提示'
								,content: '提交成功'
								,yes: function(){
									layer.closeAll();
								}
							});
						}else {
							layer.open({
								title: '系统提示'
								,content: '保存失败'
								,yes: function(){
									layer.closeAll();
								}
							});
						}
					}
				};
				$.ajax(config)
			})

			//保存评分标准
			$('#answer-save').click(function () {
				var url= '/system/score/edit'
				var data = $('#form-score-grading').serialize();
				var id = $('#get-answer-score').val()
				var config = {
					url: url,
					type: "post",
					dataType: "json",
					data: data,
					beforeSend: function () {
						$('.close-btn').click()
						$.modal.loading("正在处理中，请稍候...");
					},
					success: function(result) {
						//关闭遮罩层
						$.modal.closeLoading();
						if (result.code==0){
							//更新本地的数据
							for (let score of scores) {
								if (score.id==id){
									score.grading=$('#grading-id').val();
								}
							}
						}else {
							layer.open({
								title: '系统提示'
								,content: '保存失败'
								,yes: function(){
									layer.closeAll();
								}
							});
						}
					}
				};
				$.ajax(config)
			})
			//阶段成果
			$('#achievement-save').click(function () {
				var url= '/system/score/edit'
				var data = $('#form-achievement-grading').serialize();
				var id = $('#get-achievement-score').val()
				var config = {
					url: url,
					type: "post",
					dataType: "json",
					data: data,
					beforeSend: function () {
						$('.close-btn').click()
						$.modal.loading("正在处理中，请稍候...");
					},
					success: function(result) {
						//关闭遮罩层
						$.modal.closeLoading();
						if (result.code==0){
							//更新本地的数据
							for (let score of scores) {
								if (score.id==id){
									score.stageResult=$('#stageResult-id').val();
								}
							}
							// console.log($('#grading-id').val())
							// $('#show-answer').html($('#grading-id').val())
						}else {
							layer.open({
								title: '系统提示'
								,content: '保存失败'
								,yes: function(){
									layer.closeAll();
								}
							});
						}
					}
				};
				$.ajax(config)
			})
		});
		//视图控制
		function view(type) {
			if (type=='answer'){
				$('#input-answer').hide()
				$('#show-answer').show()
				$('#answer-save').hide()
			}
			if (type=='achievement'){
				$('#input-achievement').hide()
				$('#show-achievement').show()
				$('#achievement-save').hide()
			}
		}
		function edit(type) {
			if (type=='answer'){
				$('#input-answer').show()
				$('#show-answer').hide()
				$('#answer-save').show()
			}
			if (type=='achievement'){
				$('#input-achievement').show()
				$('#show-achievement').hide()
				$('#achievement-save').show()
			}
		}
		
		//获取评分标准
		function getAnswer(id){
			//将id携带进页面
			$('#get-answer-score').val(id)
			if (scores!=null){
				for (let score of scores) {
					if (score.id==id){
						if(score.grading!=null){
							$('#show-answer').html(score.grading)
							$('#grading').summernote('code', score.grading);
						} else {
							$('#show-answer').html('<div onclick="edit(\'answer\')" style="width: 100%;text-align: center;padding-top: 20%;padding-bottom: 20%;cursor:pointer;"> 请设置评分标准\n' +
									               '</div>')
							$('#grading').summernote('code', "");
						}
					}
				}
			}
		}

		//获取阶段成功
		function getAchievement(id){
			//将id携带进页面
			$('#get-achievement-score').val(id)
			if (scores!=null){
				for (let score of scores) {
					if (score.id==id){
						if(score.stageResult!=null){
							$('#show-achievement').html(score.stageResult)
							$('#stageResult').summernote('code', score.stageResult);
						} else {
							$('#show-achievement').html('<div onclick="edit(\'achievement\')" style="width: 100%;text-align: center;padding-top: 20%;padding-bottom: 20%;cursor:pointer;"> 请上传任务的阶段成功\n' +
									'</div>')
							$('#stageResult').summernote('code', "");
						}
					}
				}
			}
		}
		//查看关联任务阶段成果
		function checkAchievement(id){

			if (linkTaskScores!=null){
				for (let linkTaskScore of linkTaskScores) {
					if (linkTaskScore.id==id){
						if (linkTaskScore.stageResult!=null){
							$('#check-achievement-content').html(linkTaskScore.stageResult)
						}else {
							$('#check-achievement-content').html('<div  style="width: 100%;text-align: center;padding-top: 20%;padding-bottom: 20%;"> 对方还未上传阶段成果\n' +
									'</div>')
						}
					}
				}
			}
		}
		//查看关联任务评分标准
		function checkAnswer(id){

			if (linkTaskScores!=null){
				for (let linkTaskScore of linkTaskScores) {
					if (linkTaskScore.id==id){
						if (linkTaskScore.grading!=null){
							$('#check-answer-content').html(linkTaskScore.grading)
						} else {
							$('#check-answer-content').html('<div  style="width: 100%;text-align: center;padding-top: 20%;padding-bottom: 20%;"> 对方还未上传评分标准\n' +
									'</div>')
						}
					}
				}
			}
		}
		//评分分数滑块
		layui.use('slider', function(){

			var slider = layui.slider;
			for (let linkTaskScore of linkTaskScores) {
				//渲染
				slider.render({
					elem: '#slide'+linkTaskScore.id
					,min: 0
					,max: 10
					,value: 10
					,change: function(value){
						$('#score'+linkTaskScore.id).val(value)

					}
				});
			}
		})


		/*匹配确认*/
		function confirmTask(taskId) {
			$.modal.confirm("确认要绑定该任务吗?", function() {
				var url= prefix+"/edit/matchStatus"
				var data = {
					id:taskId,
					matchStatus:1
				}
				var config = {
					url: url,
					type: "post",
					dataType: "json",
					data: data,
					beforeSend: function () {
						$.modal.loading("正在处理中，请稍候...");
					},
					success: function(result) {
						if (typeof callback == "function") {
							callback(result);
						}
						//关闭遮罩层
						$.modal.closeLoading();
						//$.operate.successTabCallback(result);
					}
				};
				$.ajax(config)

				$('#myModal').hide()
				$('.modal-backdrop').hide()

			});
		}
		/**匹配更换*/
		function replaceTask(taskId) {
			$.modal.confirm("确认要更换任务吗？", function() {
				var url= prefix+"/replaceTask"
				var data = {
					id:taskId,
					matchStatus:0,
					status:'1',
					taskLinkId: -1
				}
				var config = {
					url: url,
					type: "post",
					dataType: "json",
					data: data,
					beforeSend: function () {
						$.modal.loading("正在处理中，请稍候...");
					},
					success: function(result) {
						if (typeof callback == "function") {
							callback(result);
						}
						//关闭遮罩层
						$.modal.closeLoading();
						//$.operate.successTabCallback(result);
					}
				};
				$.ajax(config)


				$('#myModal').hide()
				$('.modal-backdrop').hide()

			});

		}


		//聊天
		var user = [[${selfUser}]]
		var linkUser = [[${linkUser}]]
		function goChat() {
			var userId = user.userId;
			var otherSideUserId = linkUser.userId;
			var url = ctx + 'taskcenter/taskcenter/chat/'+userId+'/'+otherSideUserId;
			top.layer.open({
				type : 2,
				title : '交流',
				anim : 2,
				area : [ '25%', '90%' ],
				maxmin : true,
				shadeClose: true,
				content : url
			})
		}


	</script>
</body>
</html>
